<template>
  <div>
    <div class="score">
      <div class="result">测试结果</div>
      <div class="content">
        <p>得分：{{ score }}分</p>
        <p>你真是个小天才!</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import useQuestionStore from '../store/question.js';
import { onMounted, ref } from 'vue';

// 获取仓库中的问题数据
// 获取仓库中的用户答案
// 计算得分
const questionStore = useQuestionStore()

let score = ref(0)

onMounted(() => {   // 当前页面加载完成后
  // 获取仓库中的问题数据
  const question = questionStore.state.questionList
  console.log(question);

  // 获取仓库中的用户答案
  const answer = questionStore.state.answerList
  console.log(answer);

  // 获取问题答案id
  const getanswerId = (arr) => {
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].is_standard_answer === 1) {
        return arr[i].topic_answer_id
      }
    }
  }

  // 计算得分
  for (let i = 0; i < question.length; i++) {
    // 获取问题答案id  是否等于  用户输入存入的id
    if (getanswerId(question[i].topic_answer) === answer[i]) {
      score.value += 1 / question.length * 100
    }
  }

})

</script>

<style lang="less" scoped>
.score {
  .result {
    height: 52px;
    padding: 14px;
    box-sizing: border-box;
    font-size: 1.6rem;
    font-weight: 600;
    background: #FFFFFF rgba(0, 0, 0, 0.001);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  }

  .content {
    p {
      text-align: center;
      margin-top: 37px;
      font-size: 26px;
      font-weight: 600;
    }

    p:nth-child(2) {
      margin-top: 7px;
      color: #6B7280;
      font-size: 12px;
    }
  }
}
</style>